<template>
    <div class="comp" ref="add">

    </div>
</template>
<script setup>
// 引入基础模块
import { ref, onMounted, inject } from 'vue'
const echarts = inject('echarts')
const api = inject('api')
let add = ref(null)
let ying = null
let allData = []
function add1() {
    ying = echarts.init(add.value, 'pink')
    let init1 = {
        title: {
            text: '你二大爷',
            // subtext: 'Fake Data',
            // left: 'center'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['北京', 'Video Ads', 'Direct', 'Search Engine']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
    }
    ying.setOption(init1)
}
async function add2() {
    let { data } = await api('CropGrowthTrend')
    allData = data
    console.log(allData);

    // console.log(allData[0].content[1]);
    add3()
}
function add3() {
    let add4 = {
        xAxis: {
            type: 'category',
            boundaryGap: false,
            // data: allData.map(item=>item.city)
            // data:allData.map(item=>item[0].content)
            data: allData[0].content.map(item=>item.month)
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '北京',
                type: 'line',
                stack: 'Total',
                smooth: true,
                data:  allData[0].content.map(item=>item.area)
                // data:allData.map(item=>item[0])
            },
            {
                name: 'Union Ads',
                type: 'line',
                stack: 'Total',
                smooth: true,
                // data: [220, 182, 191, 234, 290, 330, 310]
                data:  allData[1].content.map(item=>item.area)
            },
            {
                name: 'Video Ads',
                type: 'line',
                stack: 'Total',
                smooth: true,
                // data: [150, 232, 201, 154, 190, 330, 410]
                data:  allData[2].content.map(item=>item.area)
            },
            {
                name: 'Direct',
                type: 'line',
                stack: 'Total',
                smooth: true,
                // data: [320, 332, 301, 334, 390, 330, 320]
                data:  allData[3].content.map(item=>item.area)
            }
            
        ]
    }
    ying.setOption(add4)
}
// ying.setOption(init1)
onMounted(() => {
    add1()
    add2()
})
</script>
<style></style>